<script setup>
    import { ref, inject } from 'vue'
    import selectVue from './select.vue'
    import { repPostReportService, repUpdateReportService, getSubExperService, updateExperFlagService } from '@/api/report'
    import { uploadFileService } from '@/api/upload'
    import moment from '@/utils/moment'
    import { UploadFilled } from '@element-plus/icons-vue'

    // 抽屉的状态
    const drawerState = ref(false)

    // 上传的id
    const uploadId = ref()

    const inp = ref('选择 文件 ...')

    // 控制按钮的状态
    const btnState = ref()

    const selectBox = ref()

    const fileInp = ref()

    // form表单的数据
    const formData = ref()

    // 控制抽屉的状态
    const changeDrawerState = () => {
        drawerState.value = !drawerState.value
        inp.value = '选择 文件 ...'
    }

    const openDrawer = () => {
        selectBox.value.drawerSubject()
    }
    
    // 抽屉组件的数据
    const drawerDate = (state, obj) => {
        drawerInfo.value = obj
        btnState.value = state
    }

    // 使用defineExpose向父组件暴露方法
    defineExpose({
        changeDrawerState,
        drawerDate
    })

    // 抽屉的数据
    const drawerInfo = ref({
        subject: '',
        title: '',
        objective: '',
        content: '',
        summarize: '',
        date: '',
        state: '',
    })
    const rules = {
        subject: [{ required: true, message: '请选择科目', trigger: 'blur' }],
        title: [{ required: true, message: '实验标题不能为空', trigger: 'blur' }],
        objective: [{ required: true, message: '实验目的不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '实验内容不能为空', trigger: 'blur' }],
        summarize: [{ required: true, message: '实验总结不能为空', trigger: 'blur' }]
    }

    // 接收父组件传的标题
    const props = defineProps({
        title: String,
        status: String,
        rowId: Number
    })
    
    //新增实验报告
    const postReport = async() => {
        const { data } = await repPostReportService(drawerInfo.value)
        if (data.status === 0) {
            uploadId.value = data.data
            uploadFile()
            ElMessage.success(data.message)
        } else {
            ElMessage.error(data.message)
        }
    }

    // 编辑实验报告
    const uodateReport = async(obj) => {
        uploadId.value = obj.id
        const { data } = await repUpdateReportService(obj)
        if (data.status === 0) {
            ElMessage.success(data.message)   
            uploadFile()
        } else {
            ElMessage.error(data.message)
        }
    }

    // 上传文件
    const uploadFile = async() => {
        const formData = new FormData()
        formData.append('files', fileInp.value.files[0])
        formData.append('files', uploadId.value)
        const { data } = await uploadFileService(formData)
        console.log(data)
    }

    // 使用inject获取父组件的方法
    const getIngect = inject('getReport')

    // 提交和草稿按钮
    const submit = async(state) => {
        drawerInfo.value.subject = selectBox.value.selectValue
        drawerInfo.value.date = moment()
        await formData.value.validate()
        // 草稿
        if (state === 'draft') {
            drawerInfo.value.state = 0
        }
        // 提交
        if (state === 'refer') {
            drawerInfo.value.state = 1
        }
        if (props.status === 'add') {
            postReport()
        } else {
            uodateReport(drawerInfo.value)
        }
        changeDrawerState()
        getIngect()
    }

    const subTitle = ref([])

    // 根据科目获取项目
const getSubExper = async() => {
    drawerInfo.value.subject = selectBox.value.selectValue
    const params = {kc: drawerInfo.value.subject}
    const {data} = await getSubExperService(params)
    subTitle.value = data.data
}

const getSubject = () => {
    getSubExper()
}

// 文件状态改变时触发
const fileChange = () => {
    inp.value = fileInp.value.files[0].name
}
</script>

<template>
    <div class="drawer-box">
        <el-drawer
            :title=title
            v-model="drawerState"
            size="50%"
            @open="openDrawer"
        >
            <div class="drawer-content">
                <el-form ref="formData" label-position="right" :model="drawerInfo" :rules="rules" label-width="100">
                    <el-form-item label="科目">
                        <selectVue @blur="getSubject" ref="selectBox" :subject="drawerInfo.subject" style="width: 100%;"></selectVue>
                    </el-form-item>
                    <el-form-item label="实验名称" prop="title">
                        <el-select placeholder="请选择实验项目" v-model="drawerInfo.title" style="width: 100%;">
                            <el-option v-for="item in subTitle" :value="item.symc" :label="item.symc"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="实验目的" prop="objective">
                        <el-input :disabled="btnState === 'view' ? true : false" placeholder="请输入实验目的" type="textarea" v-model="drawerInfo.objective"></el-input>
                    </el-form-item>
                    <el-form-item label="实验内容">
                        <el-input type="textarea" class="report-content" :disabled="btnState === 'view' ? true : false" v-model="drawerInfo.content"></el-input>
                    </el-form-item>
                    <el-form-item class="item" label="实验总结" prop="summarize">
                        <el-input :disabled="btnState === 'view' ? true : false" type="textarea" v-model="drawerInfo.summarize"></el-input>
                    </el-form-item>
                    <el-form-item class="item" label="附件" prop="filed">
                        <input class="fileInp" ref="fileInp" @change="fileChange" id="fileInp" type="file">
                        <div class="file-box">
                            <div class="inp">{{ inp }}</div>
                            <div class="upload">
                                <label for="fileInp" class="file-label">
                                    <el-icon :size="26"><UploadFilled/></el-icon>
                                    <div class="title">选择 ...</div>
                                </label>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="submit('draft')" :disabled="btnState === 'view' ? true : false">草稿</el-button>
                        <el-button @click="submit('refer')" :disabled="btnState === 'view' ? true : false" type="primary">提交</el-button>
                    </el-form-item>
                </el-form>    
            </div>
        </el-drawer>
    </div>
</template>

<style lang="scss" scoped>
    .drawer-content {
        padding-right: 30px;
        .content {
            border: 2px solid #e9e9e9;
            border-radius: 4px;
            padding: 20px 30px 0px 0px;
            width: 100%;
            .item {
                margin-bottom: 20px;
            }
        }
    }
    .fileInp {
        display: none;
    }
    .file-box {
        width: 80%;
        height: 36px;
        display: flex;
        .inp {
            width: 80%;
            height: 100%;
            border: 1px solid #c9c9c9;
            color:#777777;
            display: flex;
            align-items: center;
            padding-left: 5px;
            padding-right: 5px;
            overflow: auto;
            &::-webkit-scrollbar {
                height: 4px;
                width: 0;
            }
            &::-webkit-scrollbar-track {
                background-color: #c4c4c4;
            }
            &::-webkit-scrollbar-thumb {
                background-color: #adceff;
            }
        }
        .upload {
            width: 20%;
            height: 100%;
            background-color: #5675ff;
            border-radius: 0 4px 4px 0;
            .file-label {
                padding: 0 3px 0 3px;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .title {
                    color: #fff;
                }
                ::v-deep .el-icon {
                    color: #fff;
                }
            }
        }
    }
    ::v-deep .report-content .el-textarea__inner {
        min-height: 300px !important;
    }
</style>